<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no"/>
		<script src="/shop/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/shop/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<link href="/css/layui.css" rel="stylesheet">	
		<script src="/js/layui/layui.all.js"></script>
		<style type="text/css">
			.prjiectName{
				width: 99%;
				margin: auto;
				min-height: 50px;
				height: auto;
				text-align: center;
				line-height: 50px;
				background: #e6e6e6;
				margin-top: 10px;
				border-radius: 5px;
				font-size: 25px;
				background-color: rgba(0,0,0,0);
			}
			.prjiectName:hover{
				background:beige;
			}
			
			.gcInfoz{
				width: 99%;
				margin: auto;
				height: auto;
				padding-left: 10px;
				text-align: left;
				line-height: 100px;
				background: #c3bbbb;
				/* size: 30px; */
			}
			/* .layui-table td, .layui-table th{
				font-size: 20px;
			} */
			
		</style>
	</head>
	<body >
		<div class="app" style="display: none;">
			<div class="prjiectName" v-for="projectName in projectList" >
				{{projectName.projectName}}		{{projectName.online == 'Y'?'在线':'离线'}} 	 	 
				<div class="gcInfoz">		
					<table class="layui-table" style="font-size: 30px;">
					  <thead>
						<tr>
						  <th>GC代</th>
						  <th>max</th>
						  <th>commit</th>
						  <th>init</th>
						  <th>used</th>
						  <th>占比</th>
						</tr> 
					  </thead>
					  <tbody >
						<tr v-for="gc in projectName.projectMeminfo">
						  <td>{{gc.name}}</td>
						  <td>{{gc.max/1000 | numFilter}}M</td>
						  <td>{{gc.commit/1000 | numFilter}}M</td>
						  <td>{{gc.init/1000  | numFilter}}M</td>
						  <td>{{gc.used/1000  | numFilter}}M</td>
						  <td>{{(gc.used/gc.commit*100) | numFilter}}%</td>
						</tr>			 
					  </tbody>
					</table>	
				</div>		
			</div>
			
			
		</div>
	</body>
	
	<script type="text/javascript">
		
		
		var vm = new Vue({
			el:".app",
			data:{
				projectList:[]
			},
			methods: {
				initFunction:function(){
					var this_ = this;
					$.ajax({
							type : "POST",
							url : "http://dianxiaopu.hbweiyinqing.cn:9080/f/jiankong/getProjectName",
							data:{
								
							},
							async : false,
							error : function(request) {
								
							},
							success : function(data) {
								console.log(data);
								//for
								this_.projectList = data;	 
							}
						});
				} 		
			},mounted(){ 
				 
				 this.initFunction();
				 this.$nextTick(function () {
					setInterval(this.initFunction, 5000);
				});	
			}, 
			created:function(){	
				$(".app").show();
			},
			filters: {
			  numFilter(value) {

			  // 截取当前数据到小数点后两位

			    let realVal = parseFloat(value).toFixed(2)

			    // num.toFixed(2)获取的是字符串

			    return parseFloat(realVal)

			  }

			}
	
		});

	</script>
</html>
